import { useState, useEffect } from 'react';
import { Card, Modal, Space, Button, message, Typography } from 'antd';
import {  FormattedMessage, useIntl } from 'umi';
import CreatePOForm from './createPO';
import QuickMenu from '@/components/QuickMenu';
import OperpQuery from '@/components/OperpQuery';

const { Text } = Typography;

const ViewPage = (props: any) => {
  const [visible, setVisible] = useState(false);
  const [partNum, setPartNum] = useState('');
  const [record, setRecord] = useState([]);
  const [selectedRows, setSelectedRows] = useState([]);
  const [freshNum, setFreshNum] = useState(1);
  const [totalAmt, setTotalAmt] = useState(0);
  const [totalAmt2, setTotalAmt2] = useState(0);
  const [totalAmt3, setTotalAmt3] = useState(0);
  const intl = useIntl();

  useEffect(() => {
    // componentDidMount
  }, []);

  const switchModal = (val: boolean, items?: any) => {
    if (items) {
      const record: any = [];
      items.forEach((element: any) => {
        if (element.Reference == 'Sugg') {
          record.push(element);
        }
      });
      if (record.length <= 0) {
        message.error(intl.formatMessage({id:'pages.selectAtLeastOneRecord'}));
        return;
      }
      setVisible(val);
      setRecord(record);
    } else {
      setVisible(val);
    }
  };

  const onDataLoad = (data: any) => {
    let totalAmt: number = 0;
    let totalAmt2: number = 0;
    let totalAmt3: number = 0;
    data.forEach((element: any) => {
      totalAmt += element.RequireQty;
      if (element.Reference != 'Sugg') {
        totalAmt2 += element.SupplyQty;
      } else {
        totalAmt3 += element.SupplyQty;
      }
    });
    setTotalAmt(totalAmt);
    setTotalAmt2(totalAmt2);
    setTotalAmt3(totalAmt3);
  };

  const onSelectChange = (selectedRowKeys: any, selectedRows: any) => {
    setSelectedRows(selectedRows);
  };

  const pnum = partNum ? partNum : props.partNum;
  const rowSelection = {
    onChange: onSelectChange,
  };

  return (
    <div>
      <Space style={{ marginBottom: 16 }}>
        <Button
          type="primary"
          danger
          onClick={() => switchModal(true, selectedRows)}
        >
          <FormattedMessage id="pages.createPO" />
        </Button>
        <QuickMenu path="/purchase/poSugg" icon="icon-idea" title="pages.POSugg" />
      </Space>
      <Card>
        <OperpQuery
          rowSelection={rowSelection}
          sysReportName="ReportTimePeriod"
          scroll={{ x: 'max-content', y: '600px' }}
          freshNum={freshNum}
          bordered
          onload={(d) => onDataLoad(d)}
          params={{ PartNum: pnum }}
          footer={() => (
            <Space>
              <span>
                {intl.formatMessage({id:'pages.totalDemand'})}：
                <Text type="warning" strong>
                  {totalAmt.toFixed(2)}
                </Text>
              </span>
              <span>
                {intl.formatMessage({id:'pages.totalSupply'})}：
                <Text type="success" strong>
                  {totalAmt2.toFixed(2)}
                </Text>
              </span>
              <span>
                {intl.formatMessage({id:'pages.suggest'})}：
                <Text type="danger" strong>
                  {totalAmt3.toFixed(2)}
                </Text>
              </span>
            </Space>
          )}
        />
      </Card>

      <Modal
        title={<FormattedMessage id="createPO" />}
        visible={visible}
        destroyOnClose={true}
        onCancel={() => switchModal(false)}
        footer={false}
      >
        <CreatePOForm data={record} />
      </Modal>
    </div>
  );
};

export default ViewPage;
